<template>
  <div>
    <el-container v-if="show">
      <el-main>
        <el-col :span="6">
          <div id="type" style="width:99%;height:300px;"></div>
        </el-col>
        <el-col :span="9">
          <div id="dept" style="width:99%;height:300px;"></div>
        </el-col>
        <el-col :span="9">
          <div id="persion" style="width:99%;height:300px;"></div>
        </el-col>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  components: {},
  data() {
    return {
      show:false
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    init(obj) {
      this.show = true;
      this.$nextTick(() => {
        this.$nextTick(() => {
          setTimeout(() => {
            this.loadType(obj.fpFl);
            this.loadDept(obj.fpBm);
            this.loadPersion(obj.fpGr);
          }, 100)
        })
      })
    },
    //分类分配
    loadType(total) {
      var colors = [
        "#c1232b",
        "#27727b",
        "#fcce10",
        "#e87c25",
        "#b5c334",
        "#fe8463",
        "#9bca63",
        "#fad860",
        "#f3a43b",
        "#60c0dd",
        "#d7504b",
        "#c6e579",
        "#f4e001",
        "#f0805a",
        "#26c0c0"
      ];
      var vo = [{
        value: 0,
        name: "暂无数据",
      }];
      if (total.length > 0) {
        vo = [];
      }
      for (var i = 0; i < total.length; i++) {
        vo.push({
          value: total[i].flJe,
          name: total[i].flName,
        });
      }
      var chartDom = document.getElementById('type');
      var myChart = echarts.init(chartDom);
      var option;
      option = {

        title: {
          text: '奖金分配-分类汇总',
          x: 'left',
          y: 'top',
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: '分配分类',
          type: 'pie',
          radius: ['40%', '75%'],
          avoidLabelOverlap: false,
          itemStyle: {
            normal: {
              borderRadius: 10,
              borderWidth: 2,
              color: function (params) {
                return colors[params.dataIndex%15];
              }
            },
          },
          data: vo,
          label: { //去除饼图的指示折线label
            normal: {
              show: false,
              position: 'inside',
              formatter: "{b}:{d}%"
            },
          },
        }]
      };
      option && myChart.setOption(option);
    },
    //部门分配
    loadDept(ass) {
      var colors = [
        "#e01f54",
        "#001852",
        "#f5e8c8",
        "#b8d2c7",
        "#c6b38e",
        "#a4d8c2",
        "#f3d999",
        "#d3758f",
        "#dcc392",
        "#2e4783",
        "#82b6e9",
        "#ff6347",
        "#a092f1",
        "#0a915d",
        "#eaf889",
        "#6699FF",
        "#ff6666",
        "#3cb371",
        "#d5b158",
        "#38b6b6"
      ];
      var names = ["暂无数据"];
      var voValues = [0];
      if (ass.length > 0) {
        names = [];
        voValues = [];
      }
      for (var i = 0; i < ass.length; i++) {
        names.push(ass[i].deptName);
        voValues.push(ass[i].jjJe);
      }
      var chartDom = document.getElementById('dept');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        dataZoom: [{
          type: 'slider', //有单独的滑动条，用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示
          show: true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
          start: 0, //数据窗口范围的起始百分比0-100
          end: 100, //数据窗口范围的结束百分比0-100
          xAxisIndex: [
            0], // 此处表示控制第一个xAxis，设置 dataZoom-slider 组件控制的 x轴 可是已数组[0,2]表示控制第一，三个；xAxisIndex: 2 ，表示控制第二个。yAxisIndex属性同理
        }],
        tooltip: {
          trigger: 'item'
        },
        title: {
          text: '奖金分配-部门分配',
          x: 'left',
          y: 'top',
        },
        xAxis: {
          type: 'category',
          data: names,
          show: false
        },
        yAxis: {
          type: 'value',
          // minInterval: 1,
        },
        series: [{
          itemStyle: {
            normal: {
              color: function (params) {
                return colors[params.dataIndex % 20];
              }
            },
          },
          data: voValues,
          type: 'bar'
        }]
      };
      option && myChart.setOption(option);
    },
    //个人分配
    loadPersion(ass) {
      var colors = [
        "#3fb1e3",
        "#6be6c1",
        "#626c91",
        "#a0a7e6",
        "#c4ebad",
        "#96dee8"
      ];
      var names = ["暂无数据"];
      var voValues = [0];
      if (ass.length > 0) {
        names = [];
        voValues = [];
      }
      for (var i = 0; i < ass.length; i++) {
        names.push(ass[i].ryName);
        voValues.push(ass[i].jjJe);
      }
      var chartDom = document.getElementById('persion');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        dataZoom: [{
          type: 'slider', //有单独的滑动条，用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示
          show: true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
          start: 0, //数据窗口范围的起始百分比0-100
          end: 100, //数据窗口范围的结束百分比0-100
          xAxisIndex: [
            0], // 此处表示控制第一个xAxis，设置 dataZoom-slider 组件控制的 x轴 可是已数组[0,2]表示控制第一，三个；xAxisIndex: 2 ，表示控制第二个。yAxisIndex属性同理
        }],
        tooltip: {
          trigger: 'item'
        },
        title: {
          text: '奖金分配-员工分配',
          x: 'left',
          y: 'top',
        },
        xAxis: {
          type: 'category',
          data: names
        },
        yAxis: {
          type: 'value',
          // minInterval: 1,
        },
        series: [{
          itemStyle: {
            normal: {
              color: function (params) {
                return colors[params.dataIndex % 5];
              }
            },
          },
          data: voValues,
          type: 'bar'
        }]
      };
      option && myChart.setOption(option);
    },
  }
}

</script>
<style scoped>

</style>
